<template>
  <div class="info">
    <div class="box2">
      <el-row>
        <el-col :span="24">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-dynamic">
            <el-form-item label="属性名" prop="specsname">
              <el-input v-model="ruleForm.specsname"></el-input>
            </el-form-item>
            <!-- <el-form-item label="属性值" prop="catename" >
              <el-input v-model="ruleForm.catename" style="width:400px"></el-input>
               <el-button @click="addDomain">增加属性</el-button>
            </el-form-item>-->
            <el-form-item
              v-for="(domain, index) in ruleForm.attrs"
              :label="'属性值'+index"
              :key="index"
              :prop="'attrs.' + index"
              :rules="{
                  required: true, message: '属性值不能为空', trigger: 'blur'
              }"
            >
              <el-input v-model="ruleForm.attrs[index]" style="float:left;width:50%;"></el-input>
              <el-button
                style="float:left;width:20%;margin-left:20px;"
                v-if="index==0"
                @click="addDomain"
              >增加属性</el-button>
              <el-button
                style="float:left;width:20%;margin-left:20px;"
                v-else
                @click.prevent="removeDomain(domain)"
              >删除属性</el-button>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
              <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button v-if="popType=='修改'" type="danger" @click="submitForm('ruleForm')">立即修改</el-button>
              <el-button v-else type="success" @click="submitForm('ruleForm')">立即添加</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getCateList, cateEdit, cateAdd } from "../../request";
export default {
  data() {
    return {
      ruleForm: this.transData,
      // ruleForm: {
      //   specsname: "",
      //   attrs: [""],
      //   status: 1
      // },
      // cateListOption: [],
      // // 上传文件列表
      // fileList: [],
      rules: {
        specsname: [{ required: true, message: "请输入属性名", trigger: "blur" }],
      }
    };
  },
  props: ["transData", "popType"],
  created() {
  },
  watch: {
    transData: {
      handler(newVal, oldVal) {
        this.ruleForm = newVal;
      },
      deep: true
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data= JSON.parse(JSON.stringify(this.ruleForm))
          data.attrs = data.attrs.join(",");
          // // 校验成功
          if (this.popType == "修改") {
              //修改
            this.$http
              .post("/specsedit", data)
              .then(res => {
                this.$router.go(0);
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            // 新增
            this.$http
              .post("/specsadd", data)
              .then(res => {
                this.$router.go(0);
                console.log(res);
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          // 检验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除
    removeDomain(item) {
      var index = this.ruleForm.attrs.indexOf(item);
      if (index !== -1) {
        this.ruleForm.attrs.splice(index, 1);
      }
    },
    // 添加
    addDomain() {
      if (this.ruleForm.attrs.length <= 4) {
        this.ruleForm.attrs.push("");
      } else {
        this.$message.warning("属性值最多5个");
      }
    }
  }
};
</script>
<style lang="" >
.info {
  width: 100%;
  height: auto;
  background: #fff;
}
.box2 {
  width: auto;
  margin: 20px 20px 0 0;
}
.el-dialog__body {
  padding: 0;
}
.el-dialog__footer {
  padding: 0px 20px 10px;
}
.el-dialog__wrapper {
  top: -70px;
}
</style>